<template>
  <div class="workflow-view">
    <el-steps :active="currentStep" finish-status="success" class="workflow-steps">
      <el-step title="医学影像上传" description="上传CT/MRI等医学影像" />
      <el-step title="病例报告上传" description="上传相关病例报告" />
      <el-step title="生成诊断报告" description="生成完整诊断报告" />
    </el-steps>

    <div class="step-content">
      <template v-if="currentStep === 0">
        <image-upload-step />
      </template>
      
      <template v-else-if="currentStep === 1">
        <report-upload-step />
      </template>
      
      <template v-else-if="currentStep === 2">
        <diagnosis-step />
      </template>
    </div>

    <div class="step-actions">
      <el-button 
        v-if="currentStep > 0" 
        @click="handlePrevStep"
      >
        上一步
      </el-button>
      
      <el-button 
        v-if="currentStep < 2" 
        type="primary" 
        @click="handleNextStep"
        :disabled="!canProceedToNextStep"
      >
        下一步
      </el-button>
      
      <el-button 
        v-else 
        type="success" 
        @click="handleFinish"
        :disabled="!isWorkflowComplete"
      >
        完成
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useWorkflowStore } from '@/stores/workflow'
import ImageUploadStep from './steps/ImageUploadStep.vue'
import ReportUploadStep from './steps/ReportUploadStep.vue'
import DiagnosisStep from './steps/DiagnosisStep.vue'
import { ElMessage } from 'element-plus'

const store = useWorkflowStore()
const currentStep = computed(() => store.currentStep)

const canProceedToNextStep = computed(() => {
  return store.canProceedToStep(currentStep.value + 1)
})

const isWorkflowComplete = computed(() => {
  return store.stepsValidation.imageUpload && 
         store.stepsValidation.reportUpload && 
         store.stepsValidation.diagnosis
})

const handlePrevStep = () => {
  if (currentStep.value > 0) {
    store.setCurrentStep(currentStep.value - 1)
  }
}

const handleNextStep = () => {
  if (canProceedToNextStep.value && currentStep.value < 2) {
    store.setCurrentStep(currentStep.value + 1)
  }
}

const handleFinish = () => {
  if (isWorkflowComplete.value) {
    ElMessage.success('工作流程已完成！')
    // 这里可以添加完成后的处理逻辑
  }
}
</script>

<style scoped>
.workflow-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.workflow-steps {
  padding: 20px 0;
}

.step-content {
  flex: 1;
  min-height: 400px;
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 20px;
}

.step-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
}
</style> 